<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
    <style type="text/css">
        h3 { text-align: center; }
        .desc { text-align: center; }
        code { border: 1px solid #d1d1d1; background: #f0f0f0; }
        .wrapper { margin: 15px auto; border: 1px solid blue; width: 80vw; }
        .wrapper>* { margin: 10px; }

        p.active { background: rgb(253, 214, 253); color: green; }
        p.normal { border: 1px solid gray; }

        #paragraph:hover {
            width: 60%;
        }
    </style>
</head>
<body>

    <h3>指令: v-bind</h3>
    <p class="desc">
        可以将 <code>v-bind:attrName="expression"</code> 简写为 <code>:attrName="expression"</code> 
    </p>

    <div id="root">
        <div class="wrapper first">
            <p>
                <!-- 直接为DOM元素的 原生属性 赋值则会将取值视为字符串对待 -->
                <!-- <a href="site.url">{{ site.name }}</a> -->
                <a href="http://mail.sohu.com">搜狐邮箱</a>

                &nbsp;|&nbsp;

                <!-- 采用 v-bind 可以为 DOM元素的 原生属性 绑定属性值，
                     此时等号之后 双引号 中的内容将被视为表达式处理 -->
                <a v-bind:href="site.url">{{ site.name }}</a>

                &nbsp;|&nbsp;

                <!-- 在 v-bind: 之后紧跟的是属性名称，这个属性名称视为 v-bind 指令的参数 -->
                <input v-bind:type="inputType">
            </p>
        </div>
        <div class="wrapper second">
            <h4>对象语法</h4>
            <p :class="{ 'active': isActive , 'normal': true }">
                isActive: {{ isActive }}
            </p>
            <h4>数组语法</h4>
            <p :class="[ 'normal' , activeClass ]">
                这个段落的样式是采用 <code>:class="[ 'active' , 'normal' ]"</code> 形式设置的
            </p>
        </div>
        <div class="wrapper third">
            <h4>对象语法</h4>
            <p :style="{ color: color , fontSize: fontSize }">
                为DOM元素绑定内联样式
            </p>
            <p :style="{ color , fontSize }">
                为DOM元素绑定内联样式
            </p>
            <p :style="styles">
                为DOM元素绑定内联样式
            </p>
            <h4>数组语法</h4>
            <p :style="[ styles , transit]" id="paragraph">
                采用数组语法绑定style属性值
            </p>
        </div>
    </div>

    <script src="../scripts/vue@3.2.31.js" type="text/javascript"></script>

    <script type="text/javascript">
        const options = {
            data(){
                return {
                    color: 'green',
                    fontSize: '20px',
                    styles: {
                        border: '1px solid blue',
                        color: 'red',
                        fontSize: '18px'
                    },
                    transit: {
                        transition: 'all 5s'
                    },
                    sites: [
                        { name: '网易邮箱' , url: 'http://mail.163.com' },
                        { name: '某讯邮箱' , url: 'http://mail.qq.com' },
                        { name: '新浪邮箱' , url: 'http://mail.sina.com' }
                    ]
                }
            },
            computed: {
                site(){
                    let index = 0 | ( Math.random() * this.sites.length );
                    console.log( 'index: ' , index );
                    return this.sites[ index ];
                },
                inputType(){
                    let types = [ 'text' , 'password' , 'radio' , 'checkbox' , 'file' ]
                    return types[ 0 | ( Math.random() * types.length ) ];
                },
                isActive(){
                    return Math.random() > 0.5 ;
                },
                activeClass(){
                    // 通过另外一个计算属性的值来确定是否发返回 `active` 这个 class name
                    return this.isActive ? 'active' : '' ;
                }
            }
        }
        Vue.createApp(options).mount('#root');
    </script>
    
</body>
</html>